<template>
	<HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
		<template #main>
			<ul class="goods-list">
				<li v-for="n in newList" :key="n.id">
					<RouterLink :to="`/goods-detail/${n.id}`">
						<img v-img-lazy="n.picture" />
						<p class="name">{{ n.name }}</p>
						<p class="price">&yen;{{ n.price }}</p>
					</RouterLink>
				</li>
			</ul>
		</template>
	</HomePanel>
</template>

<script>
	export default {
		name: 'HomeNew',
	}
</script>

<script setup>
	import { ref, onMounted } from 'vue'
	import HomePanel from './HomePanel.vue'
	import { reqHomeNewData } from '@/apis/home'

	const newList = ref([])

	async function getNewData() {
		try {
			const res = await reqHomeNewData()
			newList.value = res.result
		} catch (error) {
			ElMessage({
				type: 'error',
				message: error.response?.data?.error,
			})
		}
	}

	onMounted(() => {
		getNewData()
	})
</script>

<style scoped lang="scss">
	.goods-list {
		display: flex;
		justify-content: space-between;
		height: 406px;

		li {
			width: 306px;
			height: 406px;

			background: #f0f9f4;
			transition: all 0.5s;

			&:hover {
				transform: translate3d(0, -3px, 0);
				box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
			}

			img {
				width: 306px;
				height: 306px;
			}

			p {
				font-size: 22px;
				padding-top: 12px;
				text-align: center;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.price {
				color: $priceColor;
			}
		}
	}
</style>
